<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备详情</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#52c41a'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=VXBBZ-4FWRQ-P6H5D-2SLOG-P3RYQ-LHF2Q"></script>
<style>
body {
min-height: 1024px;
background-color: #f0f2f5;
}
.tab-active {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.info-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<div class="w-[1440px] mx-auto px-6 py-6">
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<h1 class="text-2xl font-medium mb-6">设备详情</h1>
<div class="border-b">
<div class="flex space-x-8">
<button class="tab-active px-4 py-3 font-medium">设备概况</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">工时统计</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">油量统计</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">行驶轨迹</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">设备日报</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">视频监控</button>
</div>
</div>
<div id="deviceInfo" class="mt-6">
<div class="grid grid-cols-3 gap-6 mb-6">
<div class="bg-gradient-to-br from-blue-50 to-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<i class="fas fa-truck text-primary text-xl mr-3"></i>
<span class="text-lg font-medium">基本信息</span>
</div>
<div class="space-y-4">
<div class="flex items-center">
<span class="text-gray-500 w-24">设备 ID：</span>
<span class="font-medium">DEV2023112501</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">设备名称：</span>
<span class="font-medium">挖掘机 XC60</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">品牌型号：</span>
<span class="font-medium">卡特彼勒 320D2</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">序列号：</span>
<span class="font-medium">SN20231125A001</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<i class="fas fa-signal text-secondary text-xl mr-3"></i>
<span class="text-lg font-medium">运行状态</span>
</div>
<div class="space-y-4">
<div class="flex items-center">
<span class="text-gray-500 w-24">设备状态：</span>
<span class="flex items-center">
<i class="fas fa-circle text-green-500 mr-2"></i>
<span class="font-medium">正常运行中</span>
</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">运行时长：</span>
<span class="font-medium">328 小时</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">最后上线：</span>
<span class="font-medium">2023-11-25 15:30:00</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">设备地址：</span>
<span class="font-medium">广东省深圳市南山区科技园</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-purple-50 to-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<i class="fas fa-cog text-purple-500 text-xl mr-3"></i>
<span class="text-lg font-medium">硬件配置</span>
</div>
<div class="space-y-4">
<div class="flex items-center">
<span class="text-gray-500 w-24">摄像头：</span>
<span class="font-medium">高清网络摄像头</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">GPS模块：</span>
<span class="font-medium">高精度定位系统</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">油量传感器：</span>
<span class="font-medium">数字式传感器</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">电池容量：</span>
<span class="font-medium">24V/100Ah</span>
</div>
</div>
</div>
</div>
<div class="relative">
<div id="map1" class="w-full h-[500px] rounded-lg"></div>
<div class="info-card absolute top-4 left-4 p-4 rounded-lg shadow-lg">
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center">
<i class="fas fa-circle text-green-500 mr-2"></i>
<span>正常运行中</span>
</div>
<div>
<span class="text-gray-500">当日工时：</span>
<span>6.5 小时</span>
</div>
<div>
<span class="text-gray-500">当前油量：</span>
<span>75%</span>
</div>
<div>
<span class="text-gray-500">电子围栏：</span>
<span class="text-green-500">正常</span>
</div>
</div>
</div>
</div>
</div>
<div id="realTimeStatus" class="hidden mt-6">
<div class="relative">
<div id="map1" class="w-full h-[500px] rounded-lg"></div>
<div class="info-card absolute top-4 left-4 p-4 rounded-lg shadow-lg">
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center">
<i class="fas fa-circle text-green-500 mr-2"></i>
<span>正常运行中</span>
</div>
<div>
<span class="text-gray-500">当日工时：</span>
<span>6.5 小时</span>
</div>
<div>
<span class="text-gray-500">当前油量：</span>
<span>75%</span>
</div>
<div>
<span class="text-gray-500">电子围栏：</span>
<span class="text-green-500">正常</span>
</div>
</div>
</div>
</div>
</div>
<div id="workingHours" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="space-x-2">
<button class="px-4 py-2 bg-primary text-white rounded-button">日视图</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">月视图</button>
</div>
<div class="flex items-center space-x-4">
<input type="month" class="px-4 py-2 border rounded-button" value="2023-11">
</div>
</div>
<div id="workingHoursChart" class="w-full h-[400px]"></div>
<div class="bg-white rounded-lg shadow-sm p-6 mt-6">
<h3 class="text-lg font-medium mb-4">2023-11-25 工时详情</h3>
<div class="grid grid-cols-2 gap-6">
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<div class="text-gray-500">总工作时长</div>
<div class="text-xl font-medium mt-1">8.5 小时</div>
</div>
<i class="fas fa-clock text-primary text-2xl"></i>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<div class="text-gray-500">负荷工作时长</div>
<div class="text-xl font-medium mt-1">6.2 小时</div>
</div>
<i class="fas fa-cog text-orange-500 text-2xl"></i>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<div class="text-gray-500">怠速时长</div>
<div class="text-xl font-medium mt-1">2.3 小时</div>
</div>
<i class="fas fa-pause-circle text-yellow-500 text-2xl"></i>
</div>
</div>
<div class="space-y-4">
<div class="p-4 bg-gray-50 rounded-lg">
<div class="flex items-center mb-3">
<i class="fas fa-user text-primary mr-2"></i>
<span class="text-gray-500">操作人员</span>
</div>
<div class="font-medium">陈师傅（A证）</div>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<div class="flex items-center mb-3">
<i class="fas fa-map-marker-alt text-red-500 mr-2"></i>
<span class="text-gray-500">作业地点</span>
</div>
<div class="font-medium">广东省深圳市南山区科技园北区B栋工地</div>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<div class="flex items-center mb-3">
<i class="fas fa-cloud text-blue-500 mr-2"></i>
<span class="text-gray-500">天气情况</span>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<div class="text-sm text-gray-500">天气</div>
<div class="font-medium">晴</div>
</div>
<div>
<div class="text-sm text-gray-500">温度</div>
<div class="font-medium">25°C</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fuelStats" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="space-x-2">
<button class="px-4 py-2 bg-primary text-white rounded-button">日</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">周</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">月</button>
</div>
<div class="flex items-center space-x-4">
<input type="month" class="px-4 py-2 border rounded-button" value="2023-11">
</div>
</div>
<div id="fuelStatsChart" class="w-full h-[400px]"></div>
<div class="bg-white rounded-lg shadow-sm p-6 mt-6">
<h3 class="text-lg font-medium mb-4">加油记录</h3>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油时间</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油量(L)</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油前油量</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油后油量</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油地点</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">操作人员</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">状态</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="border-b">
<td class="px-6 py-4 text-sm">2023-11-25 08:30</td>
<td class="px-6 py-4 text-sm">50</td>
<td class="px-6 py-4 text-sm">25%</td>
<td class="px-6 py-4 text-sm">85%</td>
<td class="px-6 py-4 text-sm">深圳市南山区加油站</td>
<td class="px-6 py-4 text-sm">王建国</td>
<td class="px-6 py-4 text-sm"><span class="text-green-500">正常</span></td>
</tr>
<tr class="border-b">
<td class="px-6 py-4 text-sm">2023-11-22 17:15</td>
<td class="px-6 py-4 text-sm">45</td>
<td class="px-6 py-4 text-sm">20%</td>
<td class="px-6 py-4 text-sm">80%</td>
<td class="px-6 py-4 text-sm">深圳市南山区加油站</td>
<td class="px-6 py-4 text-sm">李志明</td>
<td class="px-6 py-4 text-sm"><span class="text-green-500">正常</span></td>
</tr>
<tr class="border-b">
<td class="px-6 py-4 text-sm">2023-11-19 09:45</td>
<td class="px-6 py-4 text-sm">48</td>
<td class="px-6 py-4 text-sm">15%</td>
<td class="px-6 py-4 text-sm">82%</td>
<td class="px-6 py-4 text-sm">深圳市南山区加油站</td>
<td class="px-6 py-4 text-sm">张国强</td>
<td class="px-6 py-4 text-sm"><span class="text-green-500">正常</span></td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-between items-center mt-4">
<div class="text-sm text-gray-500">
共 15 条记录
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-button text-gray-600">上一页</button>
<button class="px-3 py-1 bg-primary text-white rounded-button">1</button>
<button class="px-3 py-1 border rounded-button text-gray-600">2</button>
<button class="px-3 py-1 border rounded-button text-gray-600">3</button>
<button class="px-3 py-1 border rounded-button text-gray-600">下一页</button>
</div>
</div>
</div>
</div>
<div id="trajectory" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-4">
<input type="datetime-local" class="px-4 py-2 border rounded-button" value="2023-11-25T00:00">
<span>至</span>
<input type="datetime-local" class="px-4 py-2 border rounded-button" value="2023-11-25T23:59">
<button class="px-4 py-2 bg-primary text-white rounded-button">查询</button>
</div>
</div>
<div id="map2" class="w-full h-[500px] rounded-lg"></div>
<div class="mt-4 bg-white p-4 rounded-lg shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<button class="flex items-center justify-center w-10 h-10 bg-primary text-white rounded-full hover:bg-primary/90" id="playPauseBtn">
<i class="fas fa-play"></i>
</button>
<div class="flex items-center space-x-2">
<span class="text-gray-600">倍速：</span>
<select class="px-3 py-1.5 border rounded-button bg-white" id="speedSelect">
<option value="1">1x</option>
<option value="2">2x</option>
<option value="4">4x</option>
<option value="8">8x</option>
</select>
</div>
</div>
<div class="text-gray-600">
<span id="currentTime">00:00</span> / <span id="totalTime">23:59</span>
</div>
</div>
<div class="mt-4 relative w-full h-2 bg-gray-200 rounded-full">
<div class="absolute left-0 top-0 h-full bg-primary rounded-full" style="width: 30%" id="progressBar"></div>
<input type="range" min="0" max="100" value="30" class="absolute left-0 top-0 w-full h-full opacity-0 cursor-pointer" id="progressInput">
</div>
</div>
</div>
<div id="dailyReport" class="hidden mt-6">
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">日期</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">设备名称</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">项目部名称</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">工时</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油量</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">油耗</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">工作时间</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">平均油耗</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="border-b">
<td class="px-6 py-4 text-sm">2025-2-10</td>
<td class="px-6 py-4 text-sm">挖掘机 XC60</td>
<td class="px-6 py-4 text-sm">深圳科技园项目部</td>
<td class="px-6 py-4 text-sm">8.5 小时</td>
<td class="px-6 py-4 text-sm">50L</td>
<td class="px-6 py-4 text-sm">45L</td>
<td class="px-6 py-4 text-sm">08:00-17:30</td>
<td class="px-6 py-4 text-sm">5.3L/h</td>
<td class="px-6 py-4 text-sm">
<button class="text-primary hover:text-primary-dark">详情</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-between items-center mt-4">
<div class="text-sm text-gray-500">
共 100 条记录
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-button text-gray-600">上一页</button>
<button class="px-3 py-1 bg-primary text-white rounded-button">1</button>
<button class="px-3 py-1 border rounded-button text-gray-600">2</button>
<button class="px-3 py-1 border rounded-button text-gray-600">3</button>
<button class="px-3 py-1 border rounded-button text-gray-600">下一页</button>
</div>
</div>
</div>
</div>
<div id="videoMonitor" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="space-x-2">
<button class="px-4 py-2 bg-primary text-white rounded-button">一宫格</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">四宫格</button>
</div>
<div class="flex items-center space-x-4">
<select class="px-4 py-2 border rounded-button">
<option>所有摄像头</option>
<option>前置摄像头</option>
<option>后置摄像头</option>
<option>左侧摄像头</option>
<option>右侧摄像头</option>
</select>
</div>
</div>
<div id="singleView" class="w-full h-[720px] bg-black rounded-lg relative">
<img src="https://ai-public.mastergo.com/ai/img_res/4a709e1857e468e359fd054f2baadf12.jpg" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-4 left-4 text-white font-mono text-sm">
<div>前置摄像头 01</div>
<div>2023-11-25 15:30:00</div>
</div>
</div>
<div id="quadView" class="hidden grid grid-cols-2 gap-4 w-full h-[720px]">
<div class="relative bg-black rounded-lg">
<img src="https://ai-public.mastergo.com/ai/img_res/8f3bc413263dc8bac14ecc47021bd061.jpg" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-2 left-2 text-white font-mono text-xs">
<div>前置摄像头 01</div>
<div>2023-11-25 15:30:00</div>
</div>
</div>
<div class="relative bg-black rounded-lg">
<img src="https://ai-public.mastergo.com/ai/img_res/197465c4b824a5c55b39816a0ecbe1e8.jpg" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-2 left-2 text-white font-mono text-xs">
<div>后置摄像头 02</div>
<div>2023-11-25 15:30:00</div>
</div>
</div>
<div class="relative bg-black rounded-lg">
<img src="https://ai-public.mastergo.com/ai/img_res/001b89a591e9326f73ad21bf1d51447a.jpg" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-2 left-2 text-white font-mono text-xs">
<div>左侧摄像头 03</div>
<div>2023-11-25 15:30:00</div>
</div>
</div>
<div class="relative bg-black rounded-lg">
<img src="https://ai-public.mastergo.com/ai/img_res/86480a369a5d9a637b45d819ef256db9.jpg" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-2 left-2 text-white font-mono text-xs">
<div>右侧摄像头 04</div>
<div>2023-11-25 15:30:00</div>
</div>
</div>
</div>
</div>
<script>
// 切换Tab
const tabs = document.querySelectorAll('button');
const contents = ['deviceInfo', 'workingHours', 'fuelStats', 'trajectory', 'dailyReport', 'videoMonitor'];
tabs.forEach((tab, index) => {
if(index < 6) {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('tab-active'));
tab.classList.add('tab-active');
contents.forEach(content => {
document.getElementById(content).classList.add('hidden');
});
document.getElementById(contents[index]).classList.remove('hidden');
if(index === 0) initMap1();
if(index === 3) initMap2();
if(index === 1) initWorkingHoursChart();
if(index === 2) initFuelStatsChart();
});
}
});
// 视频监控视图切换
const viewButtons = document.querySelectorAll('#videoMonitor .space-x-2 button');
const singleView = document.getElementById('singleView');
const quadView = document.getElementById('quadView');
viewButtons.forEach((button, index) => {
button.addEventListener('click', () => {
viewButtons.forEach(btn => {
btn.classList.remove('bg-primary', 'text-white');
btn.classList.add('bg-gray-100', 'text-gray-600');
});
button.classList.remove('bg-gray-100', 'text-gray-600');
button.classList.add('bg-primary', 'text-white');
if(index === 0) {
singleView.classList.remove('hidden');
quadView.classList.add('hidden');
} else {
singleView.classList.add('hidden');
quadView.classList.remove('hidden');
}
});
});
// 初始化第一个地图
initMap1();
// 初始化地图1
function initMap1() {
const center = new TMap.LatLng(22.53332, 113.93041);
const map = new TMap.Map('map1', {
center: center,
zoom: 16,
viewMode: '2D'
});
new TMap.MultiMarker({
map: map,
styles: {
"marker": new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 12.5, y: 35 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
})
},
geometries: [{
"id": "1",
"styleId": "marker",
"position": center,
"properties": {
"title": "当前位置"
}
}]
});
}
// 初始化地图2
function initMap2() {
const center = new TMap.LatLng(22.53332, 113.93041);
const map = new TMap.Map('map2', {
center: center,
zoom: 16,
viewMode: '2D'
});

const path = [
new TMap.LatLng(22.53332, 113.93041),
new TMap.LatLng(22.53432, 113.93141),
new TMap.LatLng(22.53532, 113.93241),
new TMap.LatLng(22.53632, 113.93341)
];

const polyline = new TMap.MultiPolyline({
map: map,
styles: {
'style_blue': new TMap.PolylineStyle({
color: '#1890ff',
width: 6,
lineCap: 'round'
})
},
geometries: [{
styleId: 'style_blue',
paths: [path]
}]
});

const marker = new TMap.MultiMarker({
map: map,
styles: {
"marker": new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 12.5, y: 35 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
})
},
geometries: [{
"id": "1",
"styleId": "marker",
"position": path[0],
"properties": {
"title": "当前位置"
}
}]
});

let isPlaying = false;
let currentIndex = 0;
let playSpeed = 1;
let animationFrame;

const playPauseBtn = document.getElementById('playPauseBtn');
const speedSelect = document.getElementById('speedSelect');
const progressInput = document.getElementById('progressInput');
const progressBar = document.getElementById('progressBar');
const currentTimeEl = document.getElementById('currentTime');
const totalTimeEl = document.getElementById('totalTime');

function updateMarkerPosition() {
if (!isPlaying) return;

currentIndex = (currentIndex + playSpeed) % path.length;
marker.updateGeometries([{
"id": "1",
"styleId": "marker",
"position": path[currentIndex],
"properties": {
"title": "当前位置"
}
}]);

const progress = (currentIndex / (path.length - 1)) * 100;
progressInput.value = progress;
progressBar.style.width = `${progress}%`;

const currentMinutes = Math.floor((currentIndex / path.length) * 24 * 60);
currentTimeEl.textContent = `${String(Math.floor(currentMinutes / 60)).padStart(2, '0')}:${String(currentMinutes % 60).padStart(2, '0')}`;

animationFrame = requestAnimationFrame(updateMarkerPosition);
}

playPauseBtn.addEventListener('click', () => {
isPlaying = !isPlaying;
playPauseBtn.innerHTML = isPlaying ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
if (isPlaying) {
updateMarkerPosition();
} else {
cancelAnimationFrame(animationFrame);
}
});

speedSelect.addEventListener('change', (e) => {
playSpeed = Number(e.target.value);
});

progressInput.addEventListener('input', (e) => {
const progress = Number(e.target.value);
currentIndex = Math.floor((progress / 100) * (path.length - 1));
progressBar.style.width = `${progress}%`;
marker.updateGeometries([{
"id": "1",
"styleId": "marker",
"position": path[currentIndex],
"properties": {
"title": "当前位置"
}
}]);

const currentMinutes = Math.floor((currentIndex / path.length) * 24 * 60);
currentTimeEl.textContent = `${String(Math.floor(currentMinutes / 60)).padStart(2, '0')}:${String(currentMinutes % 60).padStart(2, '0')}`;
});

totalTimeEl.textContent = '23:59';
}
// 初始化工时统计图表
function initWorkingHoursChart() {
const chart = echarts.init(document.getElementById('workingHoursChart'));
const option = {
animation: false,
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['11-19', '11-20', '11-21', '11-22', '11-23', '11-24', '11-25']
},
yAxis: {
type: 'value',
name: '工作时长(小时)'
},
series: [
{
name: '负荷工作',
type: 'bar',
stack: 'total',
data: [6.2, 5.8, 6.1, 6.4, 5.9, 5.7, 4.8],
itemStyle: {
color: '#1890ff'
}
},
{
name: '怠速时间',
type: 'bar',
stack: 'total',
data: [2.3, 2.0, 2.1, 2.3, 2.2, 2.2, 1.7],
itemStyle: {
color: '#ffd666'
}
}
],
legend: {
data: ['负荷工作', '怠速时间']
}
};
chart.setOption(option);
}
// 初始化油量统计图表
function initFuelStatsChart() {
const chart = echarts.init(document.getElementById('fuelStatsChart'));
const option = {
animation: false,
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
},
yAxis: {
type: 'value',
name: '油量(%)'
},
series: [{
data: [100, 95, 85, 75, 65, 55, 45],
type: 'line',
smooth: true,
itemStyle: {
color: '#1890ff'
}
}]
};
chart.setOption(option);
}
</script>
</body>
</html>
